<!--
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-05-21 13:27:59
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-06-05 16:35:19
 * @FilePath: \project\record-work-time\src\pages\index\index.vue
 * @Description: 
-->
<template>
  <view class="home-page">
    <Header></Header>
    <view class="body">
      <view class="swiperOut">
        <swiper vertical class="swiper-container">
          <swiper-item>
            <view class="swiperItem">
              <view class="swiperItem-text">1
                <text class="iconfont  itol-compass-fill"></text>
                <Popup />
              </view>
            </view>
          </swiper-item>
          <swiper-item>
            <view class="swiperItem">
              <SwiperContent />
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view class="progress">
        <view class="line"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import Header from './component/header.vue';
import SwiperContent from './component/swiperContent.vue';
import Popup from './component/popup.vue';

</script>

<style lang="scss" scoped>
.home-page {
  height: 100vh;
  background: linear-gradient(to left, rgb(202, 230, 235), rgb(197, 202, 249));
  display: flex;
  flex-direction: column;

  .body {
    flex: 1;
    background-color: #ffffff;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    overflow: hidden;

    .swiperOut {
      height: calc(100% - 8rpx);

      .swiper-container {
        height: 100%;
      }

      .swiperItem {
        background-color: #74dbef;
        height: 100%;
        text-align: center;

        .iconfont {
          font-size: 24rpx;

        }
      }
    }

    .progress {
      width: 100%;
      height: 8rpx;
      background: #eee;

      .line {
        height: 100%;
        width: 50%;
        background: linear-gradient(to right, #BCE0FD, #74dbef);
      }
    }
  }
}
</style>